<template>
  <div class="dna-test-container">
    <!-- Header -->
    <div class="header">
      <div class="container">
        <div class="header-content">
          <h1 class="main-title">装修DNA测评</h1>
        </div>
      </div>
    </div>

    <!-- Instructions Page -->
    <div v-if="currentPage === 'instructions'" class="page">
      <div class="page-title">
        <h2>测试说明</h2>
      </div>

      <div class="instructions">
        <div class="instruction-card">
          <div class="instruction-icon">
            <i class="fas fa-clipboard-list"></i>
          </div>
          <div class="instruction-content">
            <h3>测试规则</h3>
            <p>根据你的直觉选择，每题至少选一项，最多选三项</p>
          </div>
        </div>

        <div class="instruction-card">
          <div class="instruction-icon">
            <i class="fas fa-flask"></i>
          </div>
          <div class="instruction-content">
            <h3>科学分析</h3>
            <p>本测试共20题，基于决策心理学和装修行业大数据分析</p>
          </div>
        </div>

        <div class="instruction-card">
          <div class="instruction-icon">
            <i class="fas fa-search-location"></i>
          </div>
          <div class="instruction-content">
            <h3>精准匹配</h3>
            <p>自动生成答案精准定位匹配适合你的装修类型</p>
          </div>
        </div>
      </div>

      <el-button type="primary" size="large" class="start-btn" @click="startTest">
        开始测评
      </el-button>
    </div>

    <!-- Test Page -->
    <div v-if="currentPage === 'test'" class="page">
      <div class="question-container">
        <div class="question-title">{{ questions[currentQuestion] }}</div>

        <div class="question-info">请至少选择一项，最多选择三项</div>

        <div class="progress-container">
          <div class="progress-text">进度: {{ currentQuestion + 1 }}/20</div>
          <el-progress :percentage="((currentQuestion + 1) / 20) * 100" :show-text="false"
            color="#2e7d32"></el-progress>
        </div>

        <div class="options-container">
          <div v-for="option in options[currentQuestion]" :key="option.value" class="option-card"
            :class="{ selected: isOptionSelected(option.value) }" @click="toggleOption(option.value)">
            <span>{{ option.text }}</span>
          </div>
        </div>
      </div>

      <div class="nav-buttons">
        <el-button @click="prevQuestion" class="last-btn" :disabled="currentQuestion === 0">
          上一题
        </el-button>
        <el-button type="primary" @click="nextQuestion" class="next-btn">
          {{ currentQuestion === 19 ? '查看结果' : '下一题' }}
        </el-button>
      </div>
    </div>

    <!-- Results Page -->
    <div v-if="currentPage === 'results'" class="page">
      <div class="page-title">
        <h2>测评结果</h2>
      </div>

      <div class="result-container">
        <div class="persona-display">{{ result.persona }}</div>

        <div class="chart-container">
          <div class="process-item">
            <div class="title">理智</div>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="result.scores.A"></el-progress>
          </div>
          <div class="process-item">
            <div class="title">视觉</div>
            <el-progress :text-inside="true" :stroke-width="26" status="success"
              :percentage="result.scores.B"></el-progress>
          </div>
          <div class="process-item">
            <div class="title">省心</div>
            <el-progress :text-inside="true" :stroke-width="26" status="warning"
              :percentage="result.scores.C"></el-progress>
          </div>
          <div class="process-item">
            <div class="title">品质</div>
            <el-progress :text-inside="true" :stroke-width="26" status="exception"
              :percentage="result.scores.D"></el-progress>
          </div>
        </div>

        <div class="result-description">
          <h3>您的装修DNA分析</h3>
          <div class="result-grid">
            <div class="result-item">
              <h4><i class="fas fa-cogs"></i> 决策维度</h4>
              <p>{{ result.dimension }}</p>
            </div>
            <div class="result-item">
              <h4><i class="fas fa-user-tag"></i> 人物特征</h4>
              <ul>
                <li v-for="char in result.characteristics" :key="char">{{ char }}</li>
              </ul>
            </div>
            <div class="result-item">
              <h4><i class="fas fa-handshake"></i> 适配装企</h4>
              <p>{{ result.companies }}</p>
            </div>
            <div class="result-item">
              <h4><i class="fas fa-exclamation-triangle"></i> 签约雷区</h4>
              <p>{{ result.pitfalls }}</p>
            </div>
            <div class="result-item">
              <h4><i class="fas fa-search"></i> 考察重点</h4>
              <ul>
                <li v-for="focus in result.keyFocus" :key="focus">{{ focus }}</li>
              </ul>
            </div>
            <div class="result-item">
              <h4><i class="fas fa-lightbulb"></i> 综合报告</h4>
              <p>{{ result.report }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="nav-buttons">
        <el-button @click="restartTest" class="last-btn">重新测试</el-button>
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      <el-button type="primary" size="large" class="backBtn" @click="backToHome">
        返回首页
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DnaTestView',
  data() {
    return {
      currentPage: 'instructions',
      currentQuestion: 0,
      answers: Array(20).fill().map(() => []),
      result: null
    }
  },
  computed: {
    questions() {
      return [
        "1. 选装修公司最看重什么？",
        "2. 购买主材首先考虑什么？",
        "3. 看到优惠活动第一反应？",
        "4. 装修前做功课最关注什么？",
        "5. 装修中最担心的问题是？",
        "6. 厨房设计最关键的是什么？",
        "7. 装修中要加钱会怎么做？",
        "8. 到施工现场如何监督？",
        "9. 竣工验收最关注什么？",
        "10. 心仪物品超预算怎么办？",
        "11. 装修最值得花钱的地方？",
        "12. 如果总价偏高怎么办？",
        "13. 定制柜安装有误差怎么办？",
        "14. 工长推荐高价材料怎么办？",
        "15. 验房有小瑕疵怎么办？",
        "16. 项目经理临时换人关心什么？",
        "17. 水电排布不合理怎么办？",
        "18. 装修尾声增加保洁服务怎么选？",
        "19. 结算尾款前会做什么？",
        "20. 装修结束后最期待什么？"
      ]
    },
    options() {
      return [
        // 第1题选项
        [
          { value: "A", text: "报价实在清晰，东西实用" },
          { value: "B", text: "设计效果好看并能还原落地" },
          { value: "C", text: "有专人全程对接管理，服务到位" },
          { value: "D", text: "施工规范透明，队伍专业" }
        ],
        // 第2题选项  
        [
          { value: "A", text: "总价严格控制在预算之内" },
          { value: "B", text: "颜色、花纹、质感都很喜欢" },
          { value: "C", text: "包安装包售后，方便省事" },
          { value: "D", text: "品牌过硬，质量放心" }
        ],
        // 第3题选项
        [
          { value: "A", text: "仔细核算是否真划算" },
          { value: "B", text: "趁机买点好看装饰品" },
          { value: "C", text: "优先考虑一站式的套餐服务" },
          { value: "D", text: "看清规则限制再决定" }
        ],
        // 第4题选项
        [
          { value: "A", text: "各种材料大概价格与避坑" },
          { value: "B", text: "收集各种喜欢的参考图" },
          { value: "C", text: "寻找口碑好的全包公司" },
          { value: "D", text: "研究合同条款和验收标准" }
        ],
        // 第5题选项
        [
          { value: "A", text: "总预算严重超支" },
          { value: "B", text: "最终效果不符预期" },
          { value: "C", text: "施工进度管理混乱" },
          { value: "D", text: "隐蔽工程做不好，后期维修" }
        ],
        // 第6题选项
        [
          { value: "A", text: "动线合理，方便实用" },
          { value: "B", text: "氛围舒适，美观好看" },
          { value: "C", text: "容易清洁、耐脏污" },
          { value: "D", text: "电器配置完善，五金经久耐用" }
        ],
        // 第7题选项
        [
          { value: "A", text: "核实加价原因及合理性" },
          { value: "B", text: "特别好看又实用可以考虑" },
          { value: "C", text: "听设计师或朋友的意见" },
          { value: "D", text: "按合同办，必须符合规定" }
        ],
        // 第8题选项
        [
          { value: "A", text: "核对材料品牌及用量" },
          { value: "B", text: "检查成品效果是否满意" },
          { value: "C", text: "主要依赖监理或项目经理管理" },
          { value: "D", text: "抽查施工细节与规范" }
        ],
        // 第9题选项
        [
          { value: "A", text: "费用结算是否准确合理" },
          { value: "B", text: "整体效果好不好看" },
          { value: "C", text: "流程是否顺利，能否按时入住" },
          { value: "D", text: "边角收口、安装等细节做工" }
        ],
        // 第10题选项
        [
          { value: "A", text: "果断放弃或找实惠的替代品" },
          { value: "B", text: "喜欢最重要，调整预算买下" },
          { value: "C", text: "谈折扣或分期购买" },
          { value: "D", text: "确认长期价值（质保售后）再决定" }
        ],
        // 第11-20题选项...
        [
          { value: "A", text: "基础硬装要扎实（水电/防水）" },
          { value: "B", text: "提升视觉效果的核心部位" },
          { value: "C", text: "智能家居提升便利性" },
          { value: "D", text: "环保达标与健康安全" }
        ],
        [
          { value: "A", text: "逐项审核单价及合理性" },
          { value: "B", text: "确认是否为达到效果的必要花费" },
          { value: "C", text: "协商多送服务或小家电" },
          { value: "D", text: "核对工程量与图纸是否一致" }
        ],
        [
          { value: "A", text: "沟通责任与扣款补偿" },
          { value: "B", text: "商量解决办法不能影响整体美观" },
          { value: "C", text: "只要问题不大就没关系" },
          { value: "D", text: "找出原因并要求返工重做" }
        ],
        [
          { value: "A", text: "比价确认合理性" },
          { value: "B", text: "关键是效果怎么样" },
          { value: "C", text: "信任工长的专业经验" },
          { value: "D", text: "检查材料品质怎么样" }
        ],
        [
          { value: "A", text: "要求修复并核算赔偿费用" },
          { value: "B", text: "家具能遮住就算了" },
          { value: "C", text: "要求尽快修复" },
          { value: "D", text: "全面检查有无其他隐患" }
        ],
        [
          { value: "A", text: "后续费用和用料标准是否一致" },
          { value: "B", text: "新来的懂不懂我要的风格" },
          { value: "C", text: "确保交接顺利避免延期" },
          { value: "D", text: "确认接替人能力水平" }
        ],
        [
          { value: "A", text: "现场测量实算费用" },
          { value: "B", text: "关心对完成效果有没有影响" },
          { value: "C", text: "交由监理协调处理" },
          { value: "D", text: "按图纸规范要求整改" }
        ],
        [
          { value: "A", text: "自己动手或找熟人更省钱" },
          { value: "B", text: "确保最终效果完美无瑕" },
          { value: "C", text: "选装修公司套餐省事" },
          { value: "D", text: "写进合同明确标准" }
        ],
        [
          { value: "A", text: "逐项核查材料及人工" },
          { value: "B", text: "确认设计效果是否落地" },
          { value: "C", text: "验收无重大问题即付款" },
          { value: "D", text: "复测关键项目与记录" }
        ],
        [
          { value: "A", text: "终于能安心住进去了" },
          { value: "B", text: "拍好看照片收获朋友点赞" },
          { value: "C", text: "不用再操心装修琐事" },
          { value: "D", text: "房子经久耐用质量可靠" }
        ]
      ]
    }
  },
  methods: {
    startTest() {
      this.currentPage = 'test'
    },
    isOptionSelected(value) {
      return this.answers[this.currentQuestion].includes(value)
    },
    toggleOption(value) {
      const currentAnswers = this.answers[this.currentQuestion]
      const index = currentAnswers.indexOf(value)

      if (index > -1) {
        // 取消选择
        currentAnswers.splice(index, 1)
      } else {
        // 选择，但最多3个
        if (currentAnswers.length < 3) {
          currentAnswers.push(value)
        } else {
          this.$message.warning('最多只能选择3项')
        }
      }
    },
    prevQuestion() {
      if (this.currentQuestion > 0) {
        this.currentQuestion--
      }
    },
    nextQuestion() {
      if (this.answers[this.currentQuestion].length === 0) {
        this.$message.warning('请至少选择一项')
        return
      }

      if (this.currentQuestion < 19) {
        this.currentQuestion++
      } else {
        // 计算结果
        this.calculateResult()
        this.currentPage = 'results'
      }
    },
    calculateResult() {
      // 重置分数
      const scores = { A: 0, B: 0, C: 0, D: 0 }

      // 计算每个维度的得分（每题每个选项加5分）
      this.answers.forEach(answerSet => {
        answerSet.forEach(answer => {
          if (scores[answer] !== undefined) {
            scores[answer] += 5
          }
        })
      })

      // 将分数转换为数组并排序
      const scoresArray = Object.entries(scores)
        .map(([type, score]) => ({ type, score }))
        .sort((a, b) => b.score - a.score)

      const [S1, S2, S3] = scoresArray

      // 确定结果类型
      let resultType

      // 应用匹配规则
      if (S1.score - S2.score >= 15) {
        // 单一类型
        resultType = S1.type
      } else if (S2.score - S3.score >= 15) {
        // 组合类型
        resultType = [S1.type, S2.type].sort().join("")
      } else {
        // 纠结型
        resultType = "纠结型"
      }

      // 转换分数为百分比用于显示
      const total = Object.values(scores).reduce((sum, score) => sum + score, 0)
      const percentageScores = {}
      Object.keys(scores).forEach(key => {
        percentageScores[key] = total > 0 ? Math.round((scores[key] / total) * 100) : 0
      })

      this.result = this.getTypeDescription(resultType, percentageScores)
      console.log(this.result, 'res')
    },
    getTypeDescription(type, scores) {
      // 单一类型描述数据
      const typeDescriptions = {
        "A": {
          dimension: "理智务实型",
          persona: "省钱小能手",
          characteristics: [
            "不花冤枉钱，只买必需的",
            "生活节俭，讲究实用",
            "拒绝'智商税'，不当冤大头",
            "口头禅：'别整虚的，实用最重要'"
          ],
          companies: "工长直管型、套餐整装公司",
          pitfalls: "低价诱导性漏项、套餐外增项失控、模糊收费条款",
          keyFocus: [
            "工长采购权透明度 & 成本控制力",
            "闭口合同覆盖范围 & 增项清单确认",
            "分阶段验收付款比例 & 扣款细则"
          ],
          report: "根据您的选择，您属于理智务实型装修决策者。您在装修过程中最关注的是预算控制和实用性，倾向于选择性价比高的方案。建议您在选择装修公司时重点关注工长采购权透明度 & 成本控制力，同时注意闭口合同覆盖范围 & 增项清单确认，以避免预算超支和额外费用。"
        },
        "B": {
          dimension: "视觉导向型",
          persona: "颜值即正义",
          characteristics: [
            "为心动设计豪爽买单",
            "坚信'好看比好用重要'",
            "受不了土气风格",
            "口头禅：'不好看住着难受啊'"
          ],
          companies: "设计工作室+施工、软装公司",
          pitfalls: "设计图与实景差异、软装代购隐性溢价、网红材料供应风险",
          keyFocus: [
            "设计师落地能力 & 过往实景案例",
            "材料小样现场对比 & 效果验证",
            "软装组合报价陷阱 & 自主采购权"
          ],
          report: "根据您的选择，您属于视觉导向型装修决策者。您非常注重装修的美观性和设计感，愿意为视觉效果投入更多资源。建议您在选择装修公司时重点关注设计师落地能力 & 过往实景案例，同时注意材料小样现场对比 & 效果验证，以确保最终效果符合您的预期。"
        },
        "C": {
          dimension: "省心便利型",
          persona: "甩手掌柜",
          characteristics: [
            "能躺着就不站着",
            "怕麻烦，最讨厌操心",
            "服务到位就痛快付钱",
            "口头禅：'别问我，找负责人'"
          ],
          companies: "套餐整装公司、高端全案公司",
          pitfalls: "项目经理过载管理、隐蔽工程验收缺失、无延期追责条款",
          keyFocus: [
            "管家服务响应机制 & 专属性",
            "延期赔付条款细则 & 执行门槛",
            "第三方监理接入权 & 协同机制"
          ],
          report: "根据您的选择，您属于省心便利型装修决策者。您希望在装修过程中尽量减少自己的参与度，更倾向于选择全包服务。建议您重点关注管家服务响应机制 & 专属性，同时仔细审查延期赔付条款细则 & 执行门槛，以确保装修过程顺利无忧。"
        },
        "D": {
          dimension: "品质严控型",
          persona: "细节控",
          characteristics: [
            "讲究品质，注重安心",
            "对细节瑕疵无法容忍",
            "宁可多花钱也不要将就",
            "口头禅：'要用十几年呢，不能马虎'"
          ],
          companies: "高端施工公司、高端全案公司",
          pitfalls: "工艺缩水风险、材料偷换问题、环保不达标风险",
          keyFocus: [
            "关键工艺样板展示 & 工人认证",
            "材料入场验收与溯源验证流程",
            "保修条款与快速响应"
          ],
          report: "根据您的选择，您属于品质严控型装修决策者。您非常注重装修质量和细节处理，对材料和工艺有较高要求。建议您在选择装修公司时重点关注关键工艺样板展示 & 工人认证，同时注意材料入场验收与溯源验证流程，以确保装修质量达到您的标准。"
        }
      }

      // 组合类型描述数据
      const comboDescriptions = {
        "AB": {
          dimension: "预算+视觉",
          persona: "精明美学家",
          characteristics: [
            "既要省钱又要漂亮",
            "钱花刀刃上",
            "关键地方显档次",
            "口头禅：'这里用贵的，其他地方省点'"
          ],
          companies: "套餐整装公司(设计升级)",
          pitfalls: "套餐材料降级、增项模糊定价、设计师拿回扣",
          keyFocus: [
            "套餐内可选材料范围 & 加价规则",
            "设计还原度保障与灵活应变成本",
            "效果图关键部位材质标注"
          ],
          report: "根据您的选择，您同时具备理智务实型和视觉导向型特质。您希望在预算范围内实现最佳视觉效果，对性价比有很高要求。建议您选择有设计实力的整装公司，重点关注套餐内可选材料范围 & 加价规则，同时注意设计还原度保障与灵活应变成本，确保在预算内实现满意的视觉效果。"
        },
        "AC": {
          dimension: "预算+省心",
          persona: "精算小当家",
          characteristics: [
            "大事不糊涂小事不想管",
            "找专业人办专业事，但钱得清楚",
            "尽量别烦我",
            "口头禅：'包出去可以，但别糊弄我'"
          ],
          companies: "平台整合型(设计+施工)",
          pitfalls: "套餐材料降级、增项模糊定价、托管金超期释放",
          keyFocus: [
            "'一口价'套餐的边界定义 & 超限成本",
            "预算控制责任人 & 增项审批流程",
            "主材代购的性价比对比 & 退换流程"
          ],
          report: "根据您的选择，您同时具备理智务实型和省心便利型特质。您希望在省心的同时确保物有所值，对服务质量和成本控制都有要求。建议您选择服务透明的平台整合型公司，重点关注'一口价'套餐的边界定义 & 超限成本，同时注意预算控制责任人 & 增项审批流程，确保装修过程既省心又经济。"
        },
        "AD": {
          dimension: "预算+品质",
          persona: "性价比质检员",
          characteristics: [
            "大钱要省，小钱要精",
            "自学验收标准",
            "关键质量绝不妥协",
            "口头禅：'这里用最好的，其他地方帮我省点'"
          ],
          companies: "套餐整装公司(监理加强)、平台整合型(监理加强)",
          pitfalls: "过度简配风险、隐蔽工程隐患",
          keyFocus: [
            "核心项目成本拆解 & 对标价值",
            "关键节点的强制检查 & 工艺细节标准",
            "材料抽检权与违约处罚"
          ],
          report: "根据您的选择，您同时具备理智务实型和品质严控型特质。您在关键质量环节非常重视，但在非核心部分注重节约。建议您选择工艺透明的高端施工团队，重点关注核心项目成本拆解 & 对标价值，同时注意关键节点的强制检查 & 工艺细节标准，确保在预算内实现可靠品质。"
        },
        "BC": {
          dimension: "视觉+省心",
          persona: "甩手美学总监",
          characteristics: [
            "大事不糊涂，小事不想管",
            "施工群免打扰",
            "好看就行，尽量别烦我",
            "口头禅：'不好看你负责，别让我操心'"
          ],
          companies: "套餐整装公司(设计升级)、高端全案公司",
          pitfalls: "过度营销包装、服务响应衰减",
          keyFocus: [
            "设计沟通效率与服务人员稳定性",
            "方案落地保障与预案沟通",
            "项目进度可视化管理工具"
          ],
          report: "根据您的选择，您同时具备视觉导向型和省心便利型特质。您重视设计效果和服务体验，愿意为高品质服务投入。建议您选择高端全案设计公司，重点关注设计沟通效率与服务人员稳定性，同时注意方案落地保障与预案沟通，确保获得满意的整体体验。"
        },
        "BD": {
          dimension: "视觉+品质",
          persona: "完美主义颜空",
          characteristics: [
            "效果要惊艳，别让我操心",
            "为理想效果不怕花钱不怕等",
            "要么做到极致，要么别做",
            "口头禅：'不对，重来'"
          ],
          companies: "高端全案公司、设计+施工+软装组合",
          pitfalls: "进口材料物流延迟、特殊工艺成本失控",
          keyFocus: [
            "节点验收与效果核验标准",
            "特殊工艺的工匠资源 & 样品确认",
            "进口材料交付保障 & 替代预案成本"
          ],
          report: "根据您的选择，您同时具备视觉导向型和品质严控型特质。您对设计效果和工艺质量都有极高要求，追求完美。建议您选择高端设计工作室，重点关注节点验收与效果核验标准，同时注意特殊工艺的工匠资源 & 样品确认，确保设计效果和工艺质量都达到您的标准。"
        },
        "CD": {
          dimension: "省心+品质",
          persona: "钞能力大佬",
          characteristics: [
            "专业人办专业事",
            "花钱买省心还要买安心",
            "验收只看结果不问过程",
            "口头禅：'钱不是问题，结果要完美'"
          ],
          companies: "高端全案公司、设计+施工+软装组合",
          pitfalls: "服务人员道德风险、验收标准差异",
          keyFocus: [
            "公司背书与团队实名责任制",
            "内控体系完备性与关键流程文件",
            "标准化验收工具（清单/仪器）与客户签字权"
          ],
          report: "根据您的选择，您同时具备省心便利型和品质严控型特质。您重视省心服务和高品质结果，愿意为可靠品质投入。建议您选择高端全案公司，重点关注公司背书与团队实名责任制，同时注意内控体系完备性与关键流程文件，确保获得省心又高品质的装修体验。"
        }
      }

      // 纠结型描述
      const confusedType = {
        dimension: "综合纠结型",
        persona: "完美主义选择困难者",
        characteristics: [
          "对各种因素都很重视",
          "难以做出最终选择",
          "希望各方面都达到理想状态",
          "口头禅：'我再想一下'"
        ],
        companies: "测评工具已经帮不了你，建议选择人工服务",
        pitfalls: "测评工具已经帮不了你，建议选择人工服务",
        keyFocus: [],
        report: "您的装修决策风格较为复杂，难以通过单一维度进行归类。这种情况可能意味着您在装修决策中面临多重需求冲突或难以取舍。建议您联系我们的专业顾问进行一对一分析，为您提供个性化解决方案。"
      }

      let description
      if (type === "纠结型") {
        description = confusedType
      } else if (comboDescriptions[type]) {
        description = comboDescriptions[type]
      } else {
        description = typeDescriptions[type] || typeDescriptions["A"]
      }

      return {
        ...description,
        scores: scores
      }
    },
    restartTest() {
      this.currentPage = 'instructions'
      this.currentQuestion = 0
      this.answers = Array(20).fill().map(() => [])
      this.result = null
    },
    backToHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.dna-test-container {
  min-height: 100vh;
  padding-bottom: 70px;
  background: linear-gradient(135deg, #f0f9eb 0%, #e6f4e6 100%);
  color: var(--text-dark);
  line-height: 1.5;
}

.main-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.header {
  background: var(--primary-color);
  color: white;
  padding: 12px 0;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-medium);
}

.container {
  max-width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}


.page {
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.92);
  padding: 20px;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
}

.page-title h2 {
  font-size: 20px;
  color: var(--primary-dark, #1b5e20);
  margin-bottom: 10px;
}

.instructions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.instruction-card {
  display: flex;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
}

.instruction-icon {
  background: linear-gradient(135deg, var(--primary-light, #4caf50), var(--primary-color, #2e7d32));
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-right: 12px;
  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
  flex-shrink: 0;
}

.instruction-content h3 {
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--primary-dark, #1b5e20);
}

.instruction-content p {
  color: var(--text-light, #666);
  line-height: 1.5;
  font-size: 14px;
}

.start-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background-color: #2e7d32;
}

.question-container {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
}

.question-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--primary-dark, #1b5e20);
  line-height: 1.4;
}

.question-info {
  background: rgba(76, 175, 80, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--primary-dark, #1b5e20);
  text-align: center;
}

.progress-container {
  margin: 12px 0 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-text {
  font-size: 13px;
  color: var(--text-light, #666);
  text-align: center;
}

.options-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
}

@media (min-width: 400px) {
  .options-container {
    grid-template-columns: 1fr 1fr;
  }
}

.option-card {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card:hover {
  border-color: var(--primary-light, #4caf50);
  background: rgba(76, 175, 80, 0.05);
}

.option-card.selected {
  border-color: var(--primary-color, #2e7d32);
  background: rgba(46, 125, 50, 0.08);
}

.option-card.selected::after {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--primary-color, #2e7d32);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}

.nav-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.last-btn {
  text-align: center;
  background-color: #2e7d32;
  color: #FFF;

}

.next-btn {
  text-align: center;
  background-color: #2e7d32;
}


.nav-buttons .el-button {
  flex: 1;
  height: 45px;
  border-radius: 8px;
}

.result-container {
  text-align: center;
  margin-bottom: 20px;
}

.persona-display {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-color, #2e7d32);
  margin: 20px 0;
  padding: 15px;
  background: rgba(46, 125, 50, 0.1);
  border-radius: 16px;
}

.process-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title {
  width: 32px;
}

.el-progress {
  flex: 1;
}

.chart-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
}

@media (min-width: 480px) {
  .chart-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

.score-text {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}

.result-description {
  background: rgba(255, 255, 255, 0.92);
  padding: 20px;
  border-radius: 16px;
  text-align: left;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
}

.result-description h3 {
  color: var(--primary-dark, #1b5e20);
  margin-bottom: 12px;
  font-size: 18px;
  text-align: center;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 15px;
}

@media (min-width: 480px) {
  .result-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.result-item {
  padding: 15px;
  background: rgba(240, 249, 240, 0.7);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(224, 240, 224, 0.8);
}

.result-item h4 {
  color: var(--primary-color, #2e7d32);
  margin-bottom: 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.result-item h4 i {
  margin-right: 8px;
  font-size: 16px;
}

.result-item p {
  color: var(--text-light, #666);
  line-height: 1.5;
  font-size: 13px;
}

.result-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.result-item li {
  margin-bottom: 8px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-light, #666);
}

.result-item li:before {
  content: "•";
  margin-right: 8px;
  color: var(--primary-color, #2e7d32);
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

/* 手机端优化 */
@media (max-width: 480px) {
  .chart-container {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
  }

  .persona-display {
    font-size: 20px;
    padding: 12px;
  }

  .result-description {
    padding: 15px;
  }

  .result-item {
    padding: 12px;
  }
}

/* 非常小的屏幕优化 */
@media (max-width: 350px) {
  .header h1 {
    font-size: 24px;
  }

  .header p {
    font-size: 14px;
  }

  .page-title h2 {
    font-size: 18px;
  }

  .chart-container {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .options-container {
    grid-template-columns: 1fr;
  }
}

/* Footer styles */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  text-align: center;
  padding: 10px 20px;
}

.backBtn {
  background-color: #2e7d32;
  border-radius: 8px;
}

.footer .nav-buttons {
  margin-bottom: 10px;
}

.footer .nav-buttons .el-button {
  width: 100%;
  height: 45px;
  font-size: 14px;
  margin-bottom: 10px;
}

.copyright {
  color: #2e7d32;
  font-size: 0.75rem;
  margin-top: 8px;
  line-height: 1.3;
}
</style>